<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../css/event.css">
</head>

<body>
    <div class="btn">
        <h3>按钮</h3>
        <ul>
            <li>当点击按钮 submit-btn 时，在 console 中输出 name 中的内容</li>
            <li>在输入过程中，如果按回车键，则同样执行上一条的需求</li>
            <li>在输入过程中，如果按 ESC 键，则把输入框中的内容清空</li>
        </ul>
        <div class="btn-bd">
            <input id="name" type="text">
            <button id="submit-btn">Submit</button>
        </div>
    </div>
    <hr>

    <div class="select">
        <h3>单选框</h3>
        <ul>
            <li>当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项</li>
            <li>当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项</li>
        </ul>
        <div class="select-bd">
            <input checked id="school" name="status" type="radio">
            <label for="school">School</label>
            <input id="company" name="status" type="radio">
            <label for="company">Company</label>

            <select id="school-select">
                <option>北京邮电大学</option>
                <option>黑龙江大学</option>
                <option>华中科技大学</option>
            </select>

            <select hidden id="company-select">
                <option>百度</option>
                <option>爱奇艺</option>
            </select>
        </div>
    </div>
    <hr>

    <div class="color">
        <h3>颜色</h3>
        <ul class="palette">
            <li style="background-color:crimson"></li>
            <li style="background-color:bisque"></li>
            <li style="background-color:blueviolet"></li>
            <li style="background-color:coral"></li>
            <li style="background-color:chartreuse"></li>
            <li style="background-color:darkolivegreen"></li>
            <li style="background-color:cyan"></li>
            <li style="background-color:#194738"></li>
        </ul>
        <p class="color-picker"></p>
    </div>
    <hr>

    <div class="clock">
        <h3>定时器</h3>
        <ul>
            <li>点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0</li>
            <li>在动画过程中，按钮的状态变为不可点击</li>
            <li>在动画结束后，按钮状态恢复，且文字变成“淡入”</li>
            <li>在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明</li>
            <li>淡入动画结束后，按钮文字变为“淡出”</li>
        </ul>
        <div class="clock-bd">
            <div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
            <button id="fade-btn">淡出</button>
        </div>
    </div>
    <hr>

    <div class="sprites">
        <h3>sprites 帧动画</h3>
        <div class="sprites-bd"></div>
    </div>

    <script src="../../js/event.js"></script>
</body>

</html>